<template>
  <el-row type="flex">
    <template v-for="(item,index) in queList">
      <template v-if="item.i1">
        <el-col :lg="{span: item.width}">
          <div class="names">{{item.name}}:</div>
        </el-col>
        <el-col :lg="{span: 3}">
          <el-input v-model="querys[item.prop]" clearable></el-input>
        </el-col>
      </template>
      <template v-else-if="item.i2">
        <el-col :lg="{span: item.width}">
          <div class="names">{{item.name}}:</div>
        </el-col>
        <el-col :lg="{span: 3}">
          <el-date-picker style="width: 160px"
                          v-model="querys[item.prop]"
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>
        </el-col>
      </template>
      <template v-else="item.i3">
        <el-col :lg="{span: item.width}">
          <div class="names">{{item.name}}:</div>
        </el-col>
        <el-col :lg="{span: 3}">
          <el-select v-model="querys[item.prop]" clearable placeholder="请选择">
            <el-option
              v-for="i in item.i3"
              :key="i.value"
              :label="i.label"
              :value="i.value">
            </el-option>
          </el-select>
        </el-col>
      </template>
    </template>
    <template v-if="butFlag">
      <el-col :lg="{span: 6}">
        <el-button-group>
          <el-button @click="add" type="primary">添加</el-button>
          <el-button @click="query" type="primary">查询</el-button>
          <el-button @click="query" type="primary">刷新</el-button>
        </el-button-group>
      </el-col>
    </template>
    <template v-else>
      <el-col :lg="{span: 3, offset: 1}">
        <el-button @click="query" type="primary">查询</el-button>
      </el-col>
    </template>
  </el-row>
</template>

<script>
  export default {
    name: 'Que',
    data () {
      return {
        addForm: [],
        fileList: []
      }
    },
    props: {
      queList: Array,
      items: Array,
      rules: Object,
      butFlag: Boolean,
      options: Array,
      addForms: Boolean,
      editableTabsValue2: String,
      tabIndex: Number,
      editableTabs2: Array,
      querys: Object
    },
    methods: {
      query () {
        this.$emit('query', this.querys)
      },
      content (msg) {
//        this.addForm.content = msg
//        this.addSubmit('addForm')
        this.addForms = false
      },
      add () {
        this.$emit('addTab', '')
      },
      addSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('add', this.addForm)
          }
        })
      },
      del () {
        this.querys = []
      },
      unset (formName) {
        this.addForms = false
        this.$refs[formName].resetFields()
      },
      handlePreview (res, file) {
        this.addForm.iconUrl = res
      },
      beforeUp (file) {
        if (this.addForm.iconUrl === undefined) {
          const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
          const isLt2M = file.size / 1024 / 1024 < 2
//          var imgWidth = ''
//          var imgHeight = ''
//          var image = new Image()
//          image.onload = function () {
//            imgWidth = image.width
//            imgHeight = image.height
//          }
//          var fr = new FileReader()
//          fr.onload = function () {
//            image.src = fr.result
//          }
//          fr.readAsDataURL(file)
//          const isSize = imgWidth / imgHeight === 5 / 3
          if (!isJPG) {
            this.$message.error('上传图片只能是 JPG 格式!')
          }
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!')
          }
          return isJPG && isLt2M
        } else {
          this.$message.error('只能上传单张图片')
          return false
        }
      },
      remove (file, fileList) {
        this.addForm.iconUrl = undefined
      }
    }
  }

</script>
<style scoped>
  .names {
    text-align: center;
    font-size: 12pt;
    margin-left: 20px;
  }

  .el-form-item {
    margin-bottom: auto;
  }

  .el-dialog__footer {
    padding: 0px 20px 15px
  }
</style>
